<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { addCluster, getClusterHostList, bindHost } from "@/api/vap/cluster";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};
const formArgus = ref({
  name: "",
  cpuThreshold: 0.9,
  memoryThreshold: 0.8,
  timeOutAction: 30,
  maxSessionTime: 120,
  maxTimeOutTime: 1,
  clusterType: 3
});

const dialogVisible = ref(false);

const showdialogForAdd = () => {
  formArgus.value = {
    name: "",
    cpuThreshold: 0.9,
    memoryThreshold: 0.8,
    timeOutAction: 1,
    maxSessionTime: 120,
    maxTimeOutTime: 30,
    clusterType: 3
  };
  getClusterHostList("0").then(res => {
    res.forEach(item => {
      hostList.value.push({
        key: item.id,
        label: item.ip
      });
    });
  });
  hostList.value = [];
  dialogVisible.value = true;
};

const clickSubmit = () => {
  addCluster(formArgus.value).then(res => {
    dialogVisible.value = false;
    const bindHostIds = [];
    bindIds.value.forEach(item => {
      bindHostIds.push(item);
    });
    console.log(res, "222", bindIds, "33", bindHostIds);
    bindHost({ clusterId: res, hostIds: bindHostIds }).then(() => {
      onSearchTable();
    });
  });
};

const hostList = ref([]);
const bindIds = ref([]);

defineExpose({
  showdialogForAdd
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加集群">
    <el-form ref="elForm" :model="formArgus" label-width="100px">
      <el-form-item label="集群类型">
        <el-radio-group v-model="formArgus.clusterType">
          <el-radio :label="1">私有</el-radio>
          <el-radio :label="2">抢占</el-radio>
          <el-radio :label="3">共享</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="集群名称">
        <el-input
          v-model="formArgus.name"
          placeholder="请输入集群名称"
          :maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="CPU阈值">
        <el-input
          v-model="formArgus.cpuThreshold"
          :maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="内存阈值">
        <el-input
          v-model="formArgus.memoryThreshold"
          :maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="最大会话时长">
        <el-input
          v-model="formArgus.maxSessionTime"
          :maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="最大超时时间">
        <el-input
          v-model="formArgus.maxTimeOutTime"
          :maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="超时策略">
        <el-radio-group v-model="formArgus.timeOutAction">
          <el-radio :label="1">注销会话</el-radio>
          <el-radio :label="2">断开会话</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="绑定主机">
        <el-transfer v-model="bindIds" :data="hostList" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clickSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
